<template>
  <div class="index">
    <el-container>
      <el-aside class="el_aside" :width="isCollapse?'64px':'200px'">
        <div class="index_aside_header">
          <img class="left_logo" src="@/assets/logo.png">
          <div class="left_name" v-if="!isCollapse">后台管理系统</div>

        </div>
        <div class="m_content">
          <div class="m_content_i">
            <div class="m_content_i_i">
              <el-menu
                  background-color="#263238"
                  text-color="#fff"
                  active-text-color="#21b7fd"
                  :unique-opened="true"
                  :collapse="isCollapse"
                  @select="handleMenuSelect"
                  class="el-menu-vertical-demo e_menu menus menu_left">
                <left-menu :menuList="menuList"></left-menu>
              </el-menu>
            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <common-header @changeCollapse="changeCollapse"></common-header>
        </el-header>
        <el-main class="el_main">
          <div class="main_content1">
            <div class="main_content2">
              <div class="main_content3">
                <router-view></router-view>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";

const commonHeader = defineAsyncComponent(() => import('../../components/header/index.vue'))
const leftMenu = defineAsyncComponent(() => import('../../components/left-menu/index.vue'))
import userStore from "@/store/modules/user";
import {getCurrentMenuByMenuId} from '@/utils/tools'
import {useRouter} from "vue-router";

const router = useRouter()

const userPinia = userStore()
const menuList = userPinia.getMenuList
// console.log(7878, menuList)
const isCollapse = ref(false)
const changeCollapse = (val: boolean) => {
  // console.log(565, val, typeof val)
  isCollapse.value = val
}
let currentMenuItem: any
const handleMenuSelect = (index: string, indexPath: string, item: any) => {
  console.log(index, indexPath, item)
  currentMenuItem = getCurrentMenuByMenuId(Number(index), menuList)
  console.log(111, currentMenuItem, currentMenuItem.menuId)
  router.push({
    path: currentMenuItem.path
  })
}
</script>

<style lang="less" scoped>
.el-header {
  padding: 0;
  height: 80px;
}

.el_aside {
  transition: 0.5s;
}

.index_aside_header {
  display: flex;
  align-items: center;
  height: 48px;
  width: 100%;
  justify-content: center;
  background: #263238;
  position: relative;

  .left_logo {
    width: 30px;
    height: 30px;
  }

  .left_name {
    color: white;
    margin-left: 10px;
  }

  .open_img {
    cursor: pointer;
    margin-top: 3px;
    position: absolute;
    right: 0;
  }
}

.m_content {
  width: 100%;
  height: calc(100vh - 48px);
  background: #263238;
  overflow: hidden;

  .m_content_i {
    width: calc(100% + 18px);
    overflow-y: auto;
    height: 100%;
    overflow-x: hidden;

    .m_content_i_i {
      width: calc(100% - 18px);
      height: 100%;

      .menu_left {
        //height: 100%;
        //width: 100%;
        border-right: none;
      }
    }
  }
}

.el_main {
  border-radius: 18px;
  width: 100%;
  background: #f9f9f9;
  height: calc(100vh - 80px);

  .main_content1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;

    .main_content2 {
      width: calc(100% + 18px);
      height: 100%;
      overflow-y: auto;
      //overflow-x: hidden;

      .main_content3 {
        width: calc(100% - 18px);
        height: 100%;
      }
    }
  }
}
</style>
